@inject IJSRuntime JS

<div class=@CssUtils.ClassNames("lang relative bg-gray-700 text-gray-300 pl-5 py-3 sm:rounded flex", @class)>
    <div class="flex ml-2 w-full justify-between cursor-pointer" @onclick="copyCommand">
        <label @ref="elCmd">@ChildContent</label>
        <small class="text-xs text-gray-400 px-3 -mt-1">sh</small>
    </div>
@if (SuccessText != string.Empty)
{
    <div class="absolute right-0 -mr-28 -mt-3 rounded-md bg-green-50 p-3">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-green-800">
                    @SuccessText
                </p>
            </div>
        </div>
    </div>
}
</div>

@code {
    [Parameter]
    public string? @class { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    string SuccessText { get; set; } = string.Empty;

    private ElementReference elCmd;

    async Task copyCommand(MouseEventArgs e)
    {
        SuccessText = "copied";
        var text = await JS.InvokeAsync<string>("JS.invoke", elCmd, "innerText");
        await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
        await Task.Delay(3_000);
        SuccessText = string.Empty;
    }
}
